<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Venus SmartSweep Robotics</title>

        <!-- 认证检查脚本 -->
        <script>
            // 检查登录状态
            function checkAuth() {
                const token = localStorage.getItem('token');
                const user = JSON.parse(localStorage.getItem('user'));

                if (!token || !user) {
                    window.location.href = '/';
                    return false;
                }
                return true;
            }

            // 页面加载时检查认证
            window.addEventListener('load', checkAuth);
        </script>

        <link rel="stylesheet" href="/css/styles-common.css">
        <link rel="stylesheet" href="/css/motion-control.css">
        <link rel="stylesheet" href="/css/robot-mission.css">
        <link rel="stylesheet" href="/css/component-states.css">
        <link rel="stylesheet" href="/css/log-style.css">
        <link rel="stylesheet" href="/css/system-panel.css">
        <link rel="stylesheet" href="/css/logo-style.css">
        <link rel="stylesheet" href="/css/logo-brand.css">
        <link rel="stylesheet" href="/css/performance-monitor.css">

        <!-- 基础库 -->
        <script src="/scripts/external/three.min.js"></script>
        <script src="/scripts/external/OrbitControls.js"></script>
        <script src="/scripts/external/CSS2DRenderer.js"></script>
        <script src="/scripts/external/protobuf.min.js"></script>
        <script src="/scripts/external/jquery.min.js"></script>
        <script src="/scripts/external/react.production.min.js"></script>
        <script src="/scripts/external/react-dom.production.min.js"></script>
        <script src="/scripts/external/lucide.min.js"></script>

        <!-- 核心功能模块 -->
        <script src="/scripts/config/WorldUnitsManager.js"></script>
        <script src="/scripts/core/comm/WebSocketHandler.js"></script>

        <!-- 机器人数据交互 -->
        <script src="/scripts/core/data/PointCloudProcessor.js"></script>
        <script src="/scripts/core/data/ChassisReceiveData.js"></script>
        <script src="/scripts/core/data/ChassisSendData.js"></script>

        <!-- 核心管理器 -->
        <script src="/scripts/core/managers/RobotConfigManager.js"></script>
        <script src="/scripts/core/managers/RobotStateManager.js"></script>

        <!-- 机器人相关 -->
        <script src="/scripts/core/robot/RobotPose.js"></script>
        <script src="/scripts/core/robot/RobotModel.js"></script>
        <script src="/scripts/core/robot/ComponentManager.js"></script>

        <!-- 场景相关 -->
        <script src="/scripts/core/scene/EnhancedMapGenerator.js"></script>
        <script src="/scripts/core/scene/WorldScene.js"></script>

        <!-- 面板 -->
        <script src="/scripts/core/ui/pannels/MissionControlPannel.js"></script>
        <script src="/scripts/core/ui/pannels/RobotMotionPanel.js"></script>
        <script src="/scripts/core/ui/pannels/ComponentStateTestPanel.js"></script>
        <script src="/scripts/core/ui/pannels/RobotSystemPanel.js"></script>

        <script src="/scripts/core/ui/assets/LogoComponent.js"></script>

        <script src="/scripts/resources/cambrian_data.js"></script>

        <!-- 主应用 -->
        <script src="/scripts/main.js"></script>

    </head>
    <body>
        <div class="robot-simulation-ui">
            <!-- 左侧面板 -->
            <div class="left-panel-container">
                <button class="panel-collapse-button">
                    <i data-lucide="chevron-left"></i>
                </button>
                <div class="left-fixed-panel">
                    <div id="component-test">
                        <!-- ComponentStateTestPanel content -->
                    </div>
                </div>
            </div>

            <div class="center-panel-container">
                <div class="main-view">
                    <div class="nav-buttons">
                        <button class="nav-button active" data-tooltip="世界地图">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10"/>
                                <path d="M2 12h20"/>
                                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
                            </svg>
                        </button>

                        <button class="nav-button" data-tooltip="雷达调试">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <!-- 外圈 -->
                                <circle cx="12" cy="12" r="10"/>

                                <!-- 无线波纹（3个弧形） -->
                                <path d="M 7 12 A 5 5 0 0 1 17 12"/>
                                <path d="M 5 12 A 7 7 0 0 1 19 12" stroke-width="1.5"/>
                                <path d="M 3 12 A 9 9 0 0 1 21 12" stroke-width="1"/>

                                <!-- 中心点 -->
                                <circle cx="12" cy="12" r="2" fill="currentColor"/>
                            </svg>
                        </button>

                        <button class="nav-button" data-tooltip="陀螺仪">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <!-- 外圈 -->
                                <circle cx="12" cy="12" r="10"/>
                                <!-- 水平椭圆 -->
                                <ellipse cx="12" cy="12" rx="8" ry="4"/>
                                <!-- 倾斜的垂直轴 (稍微右倾) -->
                                <line x1="11" y1="4" x2="13" y2="20"/>
                                <!-- 倾斜的水平轴 (稍微上倾) -->
                                <line x1="4" y1="11" x2="20" y2="13"/>
                                <!-- 倾斜的前后轴 -->
                                <line x1="6" y1="8" x2="18" y2="16"/>
                                <!-- 中心点 -->
                                <circle cx="12" cy="12" r="1.5" fill="currentColor"/>
                            </svg>
                        </button>

                        <button class="nav-button" data-tooltip="线激光点云">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="2" y1="12" x2="22" y2="12" stroke="currentColor"/>
                                <circle cx="6" cy="12" r="1"/>
                                <circle cx="10" cy="12" r="1"/>
                                <circle cx="14" cy="12" r="1"/>
                                <circle cx="18" cy="12" r="1"/>
                                <path d="M4 16L20 8" stroke-dasharray="2,2"/>
                                <path d="M4 8L20 16" stroke-dasharray="2,2"/>
                            </svg>
                        </button>

                        <button class="nav-button" data-tooltip="红外传感器">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <!-- 发射器 -->
                                <rect x="4" y="8" width="4" height="8" rx="2"/>
                                <!-- 接收器 -->
                                <rect x="16" y="8" width="4" height="8" rx="2"/>
                                <!-- 信号波形 -->
                                <path d="M8 12 H10"/>
                                <path d="M10 10 Q12 12 14 10"/>
                                <path d="M10 14 Q12 12 14 14"/>
                                <path d="M14 12 H16"/>
                            </svg>
                        </button>

                        <button class="nav-button" data-tooltip="跌落传感器">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <!-- 机器底部 -->
                                <path d="M4 8 H20"/>
                                <!-- 检测射线 -->
                                <line x1="8" y1="8" x2="8" y2="16" stroke-dasharray="2,2"/>
                                <line x1="16" y1="8" x2="16" y2="16" stroke-dasharray="2,2"/>
                                <!-- 地面 -->
                                <path d="M4 16 H20"/>
                                <!-- 传感器位置标记 -->
                                <circle cx="8" cy="8" r="1" fill="currentColor"/>
                                <circle cx="16" cy="8" r="1" fill="currentColor"/>
                            </svg>
                        </button>

                        <button class="nav-button" data-tooltip="性能监控">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <!-- 系统监控图形 -->
                                <rect x="2" y="3" width="20" height="18" rx="2" ry="2"/>
                                <!-- CPU波形图样式 -->
                                <polyline points="4,17 7,12 10,15 13,7 16,10 20,6" stroke-linecap="round"/>
                                <!-- 性能指标点 -->
                                <circle cx="7" cy="12" r="1" fill="currentColor"/>
                                <circle cx="13" cy="7" r="1" fill="currentColor"/>
                                <circle cx="20" cy="6" r="1" fill="currentColor"/>
                                <!-- 底部刻度线 -->
                                <line x1="4" y1="19" x2="20" y2="19"/>
                            </svg>
                        </button>

                        <button class="nav-button" data-tooltip="摄像头">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M23 7l-7 5 7 5V7z"/>
                                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                            </svg>
                        </button>

                    </div>

                    <div class="content-area">
                        <div id="world-content" class="content-panel active">
                            <div id="world-3d-container"></div>
                            <div class="resize-handle"></div>
                        </div>
                        <div id="camera-content" class="content-panel">
                            <div id="camera-feed-container"><!-- 摄像头视图 --></div>
                        </div>
                        <div id="lidar-content" class="content-panel">
                            <div id="lidar-container"><!-- 激光雷达视图 --></div>
                        </div>
                        <div id="imu-content" class="content-panel">
                            <div id="imu-container"><!-- IMU视图 --></div>
                        </div>
                        <div id="map-content" class="content-panel">
                            <div id="map-container"><!-- 2D地图视图 --></div>
                        </div>
                        <div id="line-laser-content" class="content-panel">
                            <div id="line-laser-container"><!-- 线激光视图 --></div>
                        </div>
                        <div id="ir-content" class="content-panel">
                            <div id="ir-container"><!-- 红外信号视图 --></div>
                        </div>
                        <div id="performance-content" class="content-panel">
                            <div class="performance-dashboard">
                                <!-- 预留给Grafana的占位区域 -->
                                <div class="grafana-placeholder">
                                    <div class="placeholder-message">
                                        <i data-lucide="bar-chart-2"></i>
                                        <span>性能监控面板开发中...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="cliff-content" class="content-panel">
                            <div id="cliff-container"><!-- 跌落信号视图 --></div>
                        </div>
                    </div>
                    <!-- <div class="resize-handle-vertical"></div> -->
                </div>

                <!-- 水平调整手柄 -->
                <div class="resize-handle-horizontal"></div>

                <!-- 日志区域 -->
                <div class="log-panel">
                    <div class="log-nav">
                      <!-- 左侧选项卡 -->
                      <div class="log-tabs">
                        <button class="log-tab active">
                          <i data-lucide="terminal"></i>
                          <span>Terminal</span>
                        </button>
                        <button class="log-tab">
                          <i data-lucide="file-text"></i>
                          <span>System Log</span>
                        </button>
                        <button class="log-tab">
                          <i data-lucide="alert-triangle"></i>
                          <span>Problems</span>
                        </button>
                      </div>

                      <!-- 搜索框 -->
                      <div class="log-search">
                        <i data-lucide="search"></i>
                        <input type="text" placeholder="Search logs...">
                      </div>

                      <!-- 右侧工具按钮 -->
                      <div class="log-tools">
                        <button class="log-tool-btn" title="Info">
                          <i data-lucide="info"></i>
                        </button>
                        <button class="log-tool-btn" title="Warning">
                          <i data-lucide="alert-triangle"></i>
                        </button>
                        <button class="log-tool-btn" title="Error">
                          <i data-lucide="x-octagon"></i>
                        </button>
                        <button class="log-tool-btn" title="Clear">
                          <i data-lucide="trash-2"></i>
                        </button>
                        <button class="log-tool-btn" title="Download">
                          <i data-lucide="download"></i>
                        </button>
                      </div>
                    </div>

                    <div class="log-content">
                      <!-- 示例日志条目 -->
                      <div class="log-entry info">
                        <span class="log-time">10:45:23</span>
                        <span class="log-level">INFO</span>
                        <span class="log-message">System initialized successfully</span>
                      </div>
                      <div class="log-entry warning">
                        <span class="log-time">10:45:24</span>
                        <span class="log-level">WARN</span>
                        <span class="log-message">Battery level is below 20%</span>
                      </div>
                      <div class="log-entry error">
                        <span class="log-time">10:45:25</span>
                        <span class="log-level">ERROR</span>
                        <span class="log-message">Failed to connect to sensor node</span>
                      </div>
                    </div>
                  </div>
            </div>

            <!-- 右侧控制面板 -->
            <div class="right-panel-container">
                <div class="right-content-area">
                    <div id="control-info"></div>
                    <div id="motion-control"></div>
                    <div id="system-info"></div>
                    <div class="system-logo">
                        <svg class="logo-graphic" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <!-- 主体渐变 -->
                                <linearGradient id="robotGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                                    <stop offset="0%" style="stop-color:#60a5fa"/>
                                    <stop offset="100%" style="stop-color:#3b82f6"/>
                                </linearGradient>

                                <!-- 上环渐变 -->
                                <linearGradient id="topRingGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%" style="stop-color:#f472b6"/>
                                    <stop offset="100%" style="stop-color:#ec4899"/>
                                </linearGradient>

                                <!-- 下环渐变 -->
                                <linearGradient id="bottomRingGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%" style="stop-color:#818cf8"/>
                                    <stop offset="100%" style="stop-color:#6366f1"/>
                                </linearGradient>

                                <filter id="glow">
                                    <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
                                    <feMerge>
                                        <feMergeNode in="coloredBlur"/>
                                        <feMergeNode in="SourceGraphic"/>
                                    </feMerge>
                                </filter>
                            </defs>

                            <!-- 上半圆环 -->
                            <path class="ring-top"
                                  d="M 10 50 A 40 40 0 1 1 90 50"
                                  fill="none"
                                  stroke="url(#topRingGradient)"
                                  stroke-width="2"/>

                            <!-- 下半圆环 -->
                            <path class="ring-bottom"
                                  d="M 10 50 A 40 40 0 1 0 90 50"
                                  fill="none"
                                  stroke="url(#bottomRingGradient)"
                                  stroke-width="2"/>

                            <!-- 机器人主体 -->
                            <circle class="robot-body" cx="50" cy="50" r="36"
                                    fill="url(#robotGradient)"/>

                            <!-- 雷达部分 -->
                            <g class="radar-group">
                                <circle class="radar-base" cx="50" cy="35" r="12"
                                        fill="#ffff00" opacity="0.6"/>
                                <circle class="radar-spin" cx="50" cy="35" r="8"
                                        fill="#00ff00" opacity="0.5"/>
                                <path class="radar-beam"
                                      d="M50 35 L50 23"
                                      stroke="#ffffff"
                                      stroke-width="2"
                                      stroke-linecap="round"/>
                            </g>

                            <!-- LED指示灯 -->
                            <circle class="led left" cx="40" cy="65" r="3"
                                    fill="#fff"
                                    filter="url(#glow)"/>
                            <circle class="led right" cx="60" cy="65" r="3"
                                    fill="#fff"
                                    filter="url(#glow)"/>
                        </svg>

                        <div class="logo-info">
                            <div class="product-name">Venus Smart Sweep</div>
                            <div class="version-info">
                                <span class="version-tag">固件版本 v2.0.0</span>
                                <span class="version-tag">硬件版本 A1.0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="footer">
            <!-- 底部状态栏 -->
            <div class="connection-group">
                <button id="connection-status">Connected</button>
                <span class="robot-ip">192.168.1.100</span>
                <button class="connect-settings" title="Connection Settings">
                    <i data-lucide="settings"></i>
                </button>
            </div>

            <!-- 传输速度 -->
            <div class="transfer-rate">
                <div class="upload">
                    <i data-lucide="arrow-up"></i>
                    <span>2.5 MB/s</span>
                </div>
                <div class="download">
                    <i data-lucide="arrow-down"></i>
                    <span>1.8 MB/s</span>
                </div>
            </div>

            <!-- 机器人坐标 -->
            <div class="robot-coordinates">
                <div class="coord">
                    <span>X:</span>
                    <span class="value">123.45</span>
                </div>
                <div class="coord">
                    <span>Y:</span>
                    <span class="value">67.89</span>
                </div>
                <div class="coord">
                    <span>θ:</span>
                    <span class="value">45°</span>
                </div>
            </div>
        </div>
    </body>
</html>
